<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>工作负荷</title>
    <div th:include="common :: commonheader"></div>
</head>

<body class="sticky-header">

<section>
    <div th:replace="common :: #leftmenu"></div>

    <!-- main content start-->
    <div class="main-content"  style="padding-top: 90px;">
        <div class="header-section">
            <div class="form-horizontal" >
                <div class="form-group" style="margin-top: 10px;margin-bottom: 0px;padding-top: 10px;">
                    <label class="control-label col-md-3">查询日期</label>
                    <div class="col-md-4">
                        <div class="input-group input-large custom-date-range">
                            <input type="text" class="form-control dpd1" name="from" id="startTime"
                                   data-date-format="yyyy-mm-dd">
                            <span class="input-group-addon">至</span>
                            <input type="text" class="form-control dpd2" name="to" id="endTime"
                                   data-date-format="yyyy-mm-dd">
                        </div>
                        <span class="help-block">请选择一个日期范围</span>
                    </div>
                    <button class="btn btn-primary" onclick="getWorkloadData()">查询</button>
                </div>
            </div>

        </div>
        <!--body wrapper start-->
        <div class="wrapper">

            <div th:class="row">
                <div class="col-sm-6">
                    <section class="panel">
                        <header class="panel-heading">
                            工作负荷 - 诊疗
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">

                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-sm-4 p-states">
                                            <span class="state-title">总诊疗人次数</span>
                                            <h3 id="totalpatients"></h3>
                                        </div>
                                        <div class="col-sm-4 p-states">
                                            <span class="state-title">门诊诊疗人次</span>
                                            <h3 id="outpatients"></h3>
                                        </div>
                                        <div class="col-sm-4 p-states">
                                            <span class="state-title">住院诊疗人次  </span><i class="fa fa-question-circle" title="所选时间段内入院总人数"></i>
                                            <h3 id="inpatients"></h3>
                                        </div>
                                    </div>


                                </div>
                            </div>

                            <div class="panel">
                                <div class="panel-body">


                                    <div class="row">
                                        <div class="col-sm-4 p-states">
                                            <span class="state-title">急诊人次数</span>
                                            <h3 id="emergencyPatients"></h3>
                                        </div>
                                        <div class="col-sm-4 p-states">
                                            <span class="state-title">死亡人数  </span><i class="fa fa-question-circle" title="所选时间段内出院且转归为“死亡”的总人数"></i>
                                            <h3 id="death"></h3>
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <div class="panel">
                                <div class="panel-body">

                                    <div class="row">

                                        <div class="col-sm-4 p-states">
                                            <span class="state-title">门诊手术人次数</span>
                                            <h3 id="operationInInpatients"></h3>
                                        </div>
                                        <div class="col-sm-4 p-states">
                                            <span class="state-title">住院手术人次数</span>
                                            <h3 id="operationInOutpatients"></h3>
                                        </div>
                                        <div class="col-sm-4 p-states">
                                            <span class="state-title">出院手术患者人数  </span><i class="fa fa-question-circle" title="所选时间段内出院且做过手术的总人数"></i>
                                            <h3 id="dischargedPatients"></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </section>
                    <section class="panel">
                        <header class="panel-heading">
                            工作负荷 - 药品
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">


                                        <div class="col-sm-4 p-states">
                                            <span class="state-title">门诊处方总数</span>
                                            <h3 ID="outpatientPrescriptions"></h3>
                                        </div>
                                        <div class="col-sm-4 p-states">
                                            <span class="state-title">使用抗菌药物的处方数</span>
                                            <h3 ID="antibacterials"></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">

                                        <div class="col-sm-4 p-states">
                                            <span class="state-title">门诊患者基本药物处方数</span>
                                            <h3 ID="outPatientEssentialDrugs"></h3>
                                        </div>
                                        <div class="col-sm-4 p-states">
                                            <span class="state-title">住院患者基本药物使用率  </span><i class="fa fa-question-circle" title="所选时间段内基本药物使用次数 / 药物使用总次数"></i>
                                            <h3 ID="essentialDrugsRateByInpatients"></h3>
                                        </div>
                                        <div class="col-sm-4 p-states">
                                            <span class="state-title">基本药物采购品种数占比  </span><i class="fa fa-question-circle" title="库存药品中基本药品的品种占比"></i>
                                            <h3 ID="essentialDrugsPurchasedRate"></h3>
                                        </div>


                                    </div>
                                </div>
                            </div>
                        </div>

                    </section>
                </div>
                <div class="col-sm-6">

                    <section class="panel">
                        <header class="panel-heading">
                            住院手术等级分布
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">
                            <div class="panel" id="pie1" style="height:400px;">
                            </div>
                        </div>
                    </section>

                </div>
            </div>

        </div>
        <!--body wrapper end-->
    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<div th:replace="common :: #commonscript"></div>

<script type="text/javascript">

    function getWorkloadData() {
        let startTime = $('#startTime').val();
        let endTime = $('#endTime').val();
        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/getWorkloadData",
            data: {"startTime": startTime, "endTime": endTime},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    $('#outpatients').text(result.outpatients);
                    $('#inpatients').text(result.inpatients);
                    $('#totalpatients').text(result.inpatients + result.outpatients);

                    $('#emergencyPatients').text(result.emergencyPatients);
                    $('#death').text(result.death);
                    $('#operationInInpatients').text(result.operationInInpatients);
                    $('#operationInOutpatients').text(result.operationInOutpatients);
                    $('#dischargedPatients').text(result.dischargedPatients);
                }

            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("请求数据失败!" + JSON.parse(errorMsg));
            }
        });//end ajax

        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/getDrugData",
            data: {"startTime": startTime, "endTime": endTime},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象

                if (result) {
                    $('#outpatientPrescriptions').text(result.outpatientPrescriptions);
                    $('#antibacterials').text(result.antibacterials);
                    $('#outPatientEssentialDrugs').text(result.outPatientEssentialDrugs);
                    $('#essentialDrugsRateByInpatients').text(toPercent(result.essentialDrugsRateByInpatients));
                    $('#essentialDrugsPurchasedRate').text(toPercent(result.essentialDrugsPurchasedRate));
                }

            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("请求数据失败!" + JSON.parse(errorMsg));
            }
        });//end ajax

        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/getOperationInfo",
            data: {"startTime": startTime, "endTime": endTime},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    let pie1 = echarts.init(document.getElementById('pie1'));
                    let option1 =  {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                        },
                        series: [
                            {
                                name: '手术等级',
                                type: 'pie',
                                radius: '50%',
                                data: result,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    pie1.setOption(option1);
                }

            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("请求数据失败!" + JSON.parse(errorMsg));
            }
        });//end ajax
    }



    $(document).ready(function () {
        $('#startTime').val(getDay(-30));
        $('#endTime').val(getDay(0));
        getWorkloadData();
    });//刷新方法结束

</script>
</body>